<!DOCTYPE HTML>
<script type="text/html" id="script-head-bar">
    <div class="layui-btn-container">
        {{# if (hasPermission("sys:scripts:add")) { }}
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
        {{# } }}
    </div>
</script>
<script type="text/html" id="script-script-bar" th:inline="none">
    {{# if (d.status==0 && hasPermission("sys:scripts:update")) { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit-script">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="start-script">启动</a>
    {{# } }}
    {{# if (d.status==1 && hasPermission("sys:scripts:pause")) { }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="pause-script">暂停</a>
    {{# } }}
    {{# if (d.status==2 && hasPermission("sys:scripts:resume")) { }}
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="resume-script">恢复</a>
    {{# } }}
</script>
<table class="layui-table" lay-filter="script-table" id="script-table">
</table>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            id: "script-table",
            elem: '#script-table'
            , toolbar: '#script-head-bar'
            , url: 'system/script?act=table' //数据接口
            , cols: [[
                {field: 'id', title: 'ID', fixed: 'left',width:80}
                , {field: 'name', title: '脚本类',width:200}
                , {field: 'description', title: '备注'}
                , {field: 'cron', title: '表达式',width:80}
                , {field: 'lastExecuteTime', title: '上次执行时间',width:80}
                , {
                    field: 'status',width:80, title: '状态', templet: function (data) {
                        switch (data.status) {
                            case 1:
                                return '<span class="layui-badge layui-bg-green">运行</span>'
                            case 0:
                                return '<span class="layui-badge layui-bg-red" >未运行</span>'
                            case 2:
                                return '<span class="layui-badge layui-bg-blue" >暂停</span>'
                            case -1:
                                return '<span class="layui-badge layui-bg-gray" >删除</span>'
                        }
                    }
                }, {fixed: 'right', title: '操作', toolbar: '#script-script-bar', width: 200}
            ]]
        });
        //头工具栏事件
        table.on('toolbar(script-table)', function (obj) {
            switch (obj.event) {
                case 'goEdit':
                    openEditWindow(null);
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(script-table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-script': {
                    openEditWindow(data);
                    break;
                }
                case 'start-script': {
                    changeStatus(data.id,'resume')
                    break;
                }
                case 'pause-script': {
                    changeStatus(data.id,'pause')
                    break;
                }
                case 'resume-script': {
                    changeStatus(data.id,'resume')
                    break;
                }
            }
        });
        function changeStatus(id,act){
            $.ajax({
                url:'system/script?act='+act,
                data:'id='+id,
                success:function(result){
                    if (result.status) {
                        table.reload('script-table', {});
                    } else {
                        alert(result.message)
                    }
                }
            })
        }

        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: $('#script-edit-layer').html(),
                title: '编辑任务'
                , area: ['400px', '300px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    $.ajax({
                        url: 'system/script?act='+(data==null?'add':'update'),
                        data: $("#script-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('script-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                        }
                    })
                }, success: function (layero, index) {
                    form.render()
                    if (data != null) {
                        form.val("script-edit-form", {
                            "id": data.id,
                            "name": data.name // "name": "value"
                            , "description": data.description,
                            "cron": data.cron
                        });
                    }
                }
            });
        }

    });

</script>

<script type="text/html" id="script-edit-layer">
    <form id="script-edit-form" style="width: 80%" class="layui-form" lay-filter="script-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">脚本名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="bean" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入备注" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">表达式</label>
            <div class="layui-input-block">
                <input type="text" name="cron" required lay-verify="required" placeholder="请输入表达式" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>
